<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style>
        .form1{
            width:400px;
            font:180% 微软雅黑;
            margin:auto;
            padding:10px;
            text-align:right;
        }
        input{
            font:50% 微软雅黑;
        }
        .leftblock{
            /**绝对定位**/
            position:absolute;
            width:100px;
            font:120% 微软雅黑;
            text-align:right;
        }
        .rightblock{
            position:absolute;
            width:300px;
            left:120px;
            padding:5px;
            border:5px dotted;
            text-align:left;
        }
        h1{
            font:50% 微软雅黑;
            margin:5px;
        }
    </style>
</head>
<body>
<div>
   <form name="form1" action="计算矩形的面积.html" method="get" target="_blank" class="form1">
       输入用户名：<input type="text" name="username" size="20" maxlength="12">
       <br>
       输入邮箱：<input type="text" name="mail" size="20" maxlength="20">
       <br>
       输入密码：<input type="password" name="password" size="20" maxlength="6">
       <br>
       <input type="submit" value="确 定">
       <input type="reset" value="重置">
   </form>
</div>
   <hr>
<div class="leftblock">
    注册信息：
</div>
<div class="rightblock">
    <form name="form2" action="#" method="post">
        <input name="truename" type="checkbox" checked="checked">使用真实姓名
        <h1>啦啦啦啦啦啦啦</h1>
        <input name="address" type="checkbox" checked="checked">显示我的地址
        <h1>啦啦啦啦啦啦啦</h1>
        <input name="mail" type="checkbox">可以给我发邮件
        <h1>啦啦啦啦啦啦啦</h1>
    </form>
</div>

</body>
</html>